<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('distributedEnter.scanRecord')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
            <view class="distributed">
                <scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolower">
                    <view class="record-card" v-for="(item,index) in data.list" :key="`${item.materialCode}` + `${index}`">
                        <!-- <uni-icons class="close-icons" type="closeempty" color="#9C9C9C" size="30" @click="handelClosePopup(index)"></uni-icons> -->
                        <view class="card-mini-head">
							<view class="title-line"></view>
							<text>{{$t('translationImage.serialNumber')}}：{{index+1}}</text>
						</view>
						<view class="custom-card-itemOne">
						    <text class="item-info-title">{{$t('distributedEnter.barcode')}}：</text> {{ item.barcode }}
						</view>
						<view class="custom-card-itemOne">
                            <text class="item-info-title">{{$t('distributedEnter.materialCode')}}：</text> {{ item.materialCode }}
                        </view>
                        <view class="custom-card-itemOne">
                            <text class="item-info-title">{{$t('distributedEnter.materialName')}}：</text>{{ item.materialName }}
                        </view>
                        <view class="custom-card-itemOne">
                            <text class="item-info-title">{{$t('distributedEnter.materialSpec')}}：</text>{{ item.materialSpec || '' }}
                        </view>
                        <view class="custom-card-itemOne">
                            <text class="item-info-title">{{$t('stockManage.materialUnit')}}：</text>{{ item.unit }}
                        </view>
                        <view class="custom-card-itemOne">
                            <text class="item-info-title">{{$t('pageTranslation.qtyOfDelivery')}}：</text>{{ item.stockQty }}
                        </view>
                        <view class="custom-card-itemOne">
                            <text class="item-info-title">{{$t('pageTranslation.realInventoryQty')}}：</text>{{ item.checkQty }}
                        </view>
                    </view>
                    <view v-if="data.noticeHooks" class="noticeHooks">
                        {{data.list.length == 0 ? $t('stockManage.notAvailable') :  $t('stockManage.without')}}
                    </view>
                </scroll-view>
            </view>
		</template>
	</gui-page>
</template>

<script setup>
    import {
		getCheckBarcodeByHIdForPda
	} from '@/api/api.js'
    import { basPdaOperationLogFn } from '@/utils/index.js';
	import { OPERATION_LOOK } from '@/constant/index.js'
	import {
		reactive,
		onMounted
	} from 'vue';
    // 接受来自父组件的传参 页面传值
	const props = defineProps({
		id: String,
	});
	onMounted(()=>{
		requestData()
	})
    let fromData = reactive({
		page:1,
		rows:10,
	});
	let data = reactive({
		list:[],
        id:props.id, // 界面传值的id
        noticeHooks: false, //暂无相关数据标识
	})
    //上拉加载
	const scrolltolower = () => {
        // data.noticeHooks  上拉的时候已经没有数据  不请求接口
		if(!data.noticeHooks){
			fromData.page ++
			requestData()
		}
	}
    // 拉去当前盘点数据
    const requestData = ()=>{
        let parmes = {
            page:fromData.page,
		    rows:fromData.rows,
			masterId: data.id // 收料单id
		}
        getCheckBarcodeByHIdForPda(parmes).then(res => {
            try {
				let inputParameter = JSON.stringify(parmes)
				let returnParameter = JSON.stringify(res)
				let operationPicture = '盘点'
				let callInterface = res.rquestUrl
				let opertionParmes = {
					inputParameter,
					returnParameter,
					operationPicture,
					callInterface,
					responseCode:res.status,//返回状态
					errorMessage:res.message,//错误信息
					isPass:res.status == 200 ? 'Y' : 'N',//是否成功 Y N
					operationType:OPERATION_LOOK
				}
				basPdaOperationLogFn(opertionParmes)
			} catch (error) {
			}
			console.log(res)
			if (res.status == 200) {
                data.noticeHooks = false
				// 根据接口返回设计上拉加载相应判断
                // res.data.rows.length == 0  当前请求第一页数据 如果为空 直接暂时相关数据
				if(fromData.page === 1){
					if (res.data.rows.length == 0) {
						data.noticeHooks = true
					}
					data.list = res.data.rows
					// if(data.list.length == res.data.total){
                    //     data.noticeHooks = true
					// }
				}else{
                    // data.list.length == res.data.total  当前数组数量  等于 接口返回的总数量  代表已无数据
					data.list = [...data.list, ...res.data.rows]
				}	
				data.noticeHooks = 	data.list.length >= res.data.total		
			} else {
				uni.showToast({ title: res.message, icon: "none" });
			}
		})
    }

</script>

<style lang="scss" scoped>
    .scroll{
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    .noticeHooks{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80rpx;
        font-size: 32rpx;
        color: #999;
    }
    .distributed {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 88rpx);
		// height: 100vh;
        position: relative;
	}


</style>
